/**
 *@description 用户画像-》会员等级
 *@author yhw
 */
import React, { PropTypes } from 'react';
import ReactEcharts from 'echarts-for-react';

const Funnel = ({data, dispatch }) => {
    const width= '100%',height = 500;
    let dataSource = [];
    if(data){
        data.map(function(item,index){
            dataSource.push({value:item.name=="黑金会员"?1:(item.name=="金卡会员"?2:(item.name=="银卡会员"?3:(item.name=="体验会员"?4:5))), name:item.name,total:item.value})
        })
    }
    
    let option = {
        tooltip : {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                const str = params.seriesName+"<br/>"+params.name+"："+parseInt(params.data.total).formatMoney()
                return str;
            }
            // formatter: "{a} <br/>{b} : {d}%"
        },
        color:['#fff','#e2d7c2','#e4e4e4','#c9c9c9'],
        // toolbox: {
        //     show : true,
        //     feature : {
        //         saveAsImage : {show: true}
        //     }
        // },
        calculable : true,
        series : [
            {
                name:'会员等级',
                type:'funnel',
                funnelAlign:'center',
                maxSize : '50%',
                // x : '50%',
                sort : 'ascending',
                itemStyle: {
                    normal: {
                        borderColor:'rgba(0,0,0,0)',
                        label: {
                            show:true,
                            position:'right',
                            textStyle:{
                              fontSize:12,
                              color:"#fff"
                            }
                        },
                        labelLine:{
                            lineStyle:{
                                color:"#fff"
                            }
                        }
                    },
                    emphasis : {
                        label : {
                            textStyle:{
                              fontSize:12,
                              color:"#fff"
                            }
                        },
                        labelLine : {
                            lineStyle:{
                                color:"#fff"
                            }
                        }
                    }
                },
                data:dataSource
            }
        ]
    };

    let onEvents = {
        'click': function(param, echart) {
            window.localStorage.setItem("imgType", "member_level");
            window.localStorage.setItem("imgTypeValue", param.name);
            window.location.hash = '#/PersonsInfo';
        }
    };
    return (<div> <ReactEcharts option = {option} style = {{width:width, height:height}} theme = {"theme_name"} onEvents={onEvents}/></div>);
}

Funnel.propTypes = {
    // width: PropTypes.number,//.isRequired,
    // height: PropTypes.number.isRequired,
    // data: PropTypes.array
};


// export default connect(mapStateToProps)(Funnel);
export default Funnel;